<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex flex-center pl-26px pt-40px pb-26px pr-26px">
            <div class="w-1000px">
                <h2 class="text-center font-bold lh-28px">{{ isMain(article.pid) }}{{ article.title }}</h2>
                <div class="flex text-12px article-title__bottom">
                    <div><b>关键词：</b>{{ article.keyword }}</div>
                    <div><b>文章来源：</b>{{ article.source }}</div>
                    <div><b>所在地区：</b>{{ article.area }}</div>
                    <div><b>推广网站：</b>{{ article.promoteWebsite }}</div>
                </div>
                <div class="text-18px lh-32px article-detail" v-html="article.content">

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getArticleDetailApi } from '@/api/b2b'

const route = useRoute()

const article = reactive({
    id: 0,
    pid:0,
    title:'',
    area:'',
    content:'',
    source:'',
    keyword:'',
    promoteWebsite:''
})
async function getArticleDetail() {
    const id = Number(route.params.id)
    const res = await getArticleDetailApi({
        id: id
    })
    if(res.code === 200){
        article.title = res.data.Title
        article.area = res.data.Province + '/' + res.data.City
        article.content = res.data.Detail
        article.source = res.data.Reprint
        article.keyword = res.data.Keyword
        article.promoteWebsite = res.data.Domainlist
        article.pid = res.data.PID
    }
}

function isMain(id: number) {
    if (id === 0) {
        return '【主】'
    }
}

onMounted(() => {
    getArticleDetail()
})
</script>

<style lang="scss">
.article-title__bottom{
    margin-top: 30px;
    border-bottom:1px solid #eeeeee;
    padding-bottom:20px;
    & > div{
        margin-right: 20px;
        color: #999;
        b{
            color: var(--title-color);
        }
    }
}
.article-detail{
    padding:10px 0;

    img{
        margin-top: 20px;
        margin-bottom:20px;
        border-radius: 10px;
    }
    p{
        margin:20px 0;
    }
}
</style>